<!-- 产品秀 -->
<ion-header class="ionHeader">
    <ion-toolbar color="primary">
        <ion-buttons slot="start">
            <ion-back-button text="" *ngIf="!fullScreen else close"></ion-back-button>
            <ng-template #close>
                <div>
                    <img style="width: 20px;" src="/assets/img/close.svg" (click)="fullScreen = false">
                </div>
            </ng-template>
        </ion-buttons>
        <ion-title>浪潮天梭K1 950</ion-title>
        <ion-buttons slot="end" class="more" (click)="openPopover($event)">
            <img src="assets/application/scan/更多.png">
        </ion-buttons>
    </ion-toolbar>
</ion-header>

<ion-content class="ionContent">
    <!-- 产品轮播图 -->
    <div *ngIf="!fullScreen">
        <div class="slidesOutDiv">
            <ion-slides class="ionSlides" pager="true" [options]="slideOpts">
                <ion-slide class="ionSlide" *ngFor="let item of product.productParameter.img">
                    <img [src]="item.src" (click)="fullScreenImg = item.src;fullScreen = true">
                </ion-slide>
            </ion-slides>
            <!--  3D链接 -->
            <div class="threeDimensional" (click)="go3D()"><img
                    src="assets/application/scan/三维.svg">
            </div>
        </div>
        <!--  产品信息 -->
        <div class="productInfo borderTop">
            <div class="productName"><h4><b>{{product.productParameter.name}}</b></h4></div>
        </div>
        <div class="productInfo">
            <div class="inlineBlock model">型号:&nbsp;</div>
            <div class="inlineBlock">{{product.productParameter.model}}</div>
            <div class="inlineBlock details"></div>
        </div>

        <div class="productInfo">
            <div class="inlineBlock model">产品制造商:&nbsp;</div>
            <div class="inlineBlock">{{product.productParameter.productManufacturer}}</div>
            <div class="inlineBlock details"></div>
        </div>
        <div class="productInfo">
            <div class="inlineBlock model">唯一标识码:&nbsp;</div>
            <div class="inlineBlock">{{product.productParameter.productUuid}}</div>
            <div class="inlineBlock details"></div>
        </div>
        <div class="productInfo borderBottom">
            <div class="inlineBlock model">资产使用者:&nbsp;</div>
            <div class="inlineBlock">{{product.productParameter.assetUser}}</div>
            <div class="inlineBlock details" (click)="goDetails()">查看详情</div>
        </div>
        <!-- 中间1px的分割线 -->
        <div class="dividingLine">&nbsp;</div>
        <!-- grid菜单布局 -->
        <ion-grid class="gridMenu">
            <ion-row>
                <ion-col class="menuColBot menuPadding" [ngClass]="(i%2===0)?'menuColRit':''" size="6"
                         *ngFor="let item of gridMenuData; let i = index" (click)="routerJump(item.href,item)">
                    <div>
                        <div class="inlineBlock width30"><img class="menuImg"
                                                              [src]="'assets/application/scan/'+item.img">
                        </div>
                        <div class="inlineBlock menuDiv menuDescription">
                            <p class="menuTitleSize"><b>{{item.name}}</b></p>
                            <p>{{item.title}}</p>
                        </div>
                    </div>
                </ion-col>
            </ion-row>
        </ion-grid>


        <!--   展示更多数据     -->
        <div *ngIf="showMoreSign;else oneLine">
            <!-- 产品参数 -->
            <div class="parameter">
                <div class="borderBot" style="padding: 10px;">技术参数</div>
                <div class="price">价格</div>
                <div class="priceValue">{{product.productParameter.price}}</div>
            </div>
            <!-- 区域分公司 -->
            <div class="branchCompany" style="margin-top: 10px;">
                <div class="inlineBlock borderBot" style="padding: 10px;width: 100%;">
                    <div class="inlineBlock">区域分公司</div>
                    <div class="inlineBlock" style="float: right; width: 20px;" (click)="getBaiduMapGeolocation()">
                        <img src="assets/application/productShow/positioning.svg">
                    </div>
                </div>
            </div>
            <div class="branchCompany borderBot" *ngFor="let branchOffice of product.manufacturer.branchOffice">
                <div class="inlineBlock "
                     style="border: 1px solid lightgrey;width: 20%;display: flex;align-items: center;">
                    <img [src]="branchOffice.img.src">
                </div>
                <div class="inlineBlock" style="padding-left: 10px;width: 80%" (click)="showToast()">
                    <p>{{branchOffice.name}}</p>
                    <p>联系电话：<a>{{branchOffice.tel}}</a>
                        <ion-icon name="send" slot="end" style="float: right;"></ion-icon>
                    </p>
                    <p>地址：{{branchOffice.address}}</p>
                </div>
            </div>
            <div class="branchCompany" style="text-align: center;" (click)="loadMore()">
                <div class="inlineBlock" style="padding: 10px;width: 100%;"><a>加载更多...</a>
                </div>
            </div>

            <!--  收起   -->
            <ion-item lines="none" (click)="showMoreSign = !showMoreSign;">
                <ion-label style="text-align: center;color: #36a5f6;">-收起</ion-label>
            </ion-item>
            <!-- 技术支持 -->
            <!--            <p class="technicalSupport">©浪潮集团通用软件有限公司 技术支持</p>-->
        </div>
        <ng-template #oneLine>
            <!--            <ion-item lines="none" class="bottomLine" (click)="showMoreSign = !showMoreSign;">-->
            <!--                <ion-label style="text-align: center;color: dodgerblue;">-->
            <!--                    <img src="assets/application/scan/新增.png"><span style="color: #36a5f6;">更多</span></ion-label>-->
            <!--            </ion-item>-->
            <div class="bottomLine" (click)="showMoreSign = !showMoreSign;">
                <p>
                    <img src="assets/application/scan/新增.svg">
                    更多
                </p>
            </div>
        </ng-template>


    </div>

    <!-- 产品全屏图 -->
    <div *ngIf="fullScreen" style="height: 100%">
        <pinch-zoom style="height: 100%;" [properties]="properties">
            <img style="min-width: 100%;background-color: #ffffff;" [src]="fullScreenImg">
        </pinch-zoom>
    </div>

</ion-content>
